<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        header {
            margin: 0;
            width: 100%;
            height: 50px;
            background-color: #10C55B;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid red; */
        }

        .content {
            display: flex;
            justify-content: space-between;
        }

        .left {
            display: flex;
        }

        .left li,
        .right li {
            height: 50px;
            line-height: 50px;
            padding-left: 16px;
            padding-right: 16px;
        }

        .left a,
        .right a {

            text-decoration: none;
            color: #AFFFD0;
            font-size: 16px;
        }

        .left li:nth-child(2) a::after{
            content:'';
            display: inline-block;
            width: 15px;    
            height: 8px;
            background: url(千图网/common.png) -185px -25px;
        }

        .left .left-first {
            background-color: #01AC48;
        }

        .left .left-first a {
            color: white;
        }

        .right {
            display: flex;
        }

        .right li {
            height: 50px;
            line-height: 48px;
            padding-left: 15px;
            padding-right: 15px;
        }

        #img1 {
            width: 22px;
            height: 16px;
            background: url('千图网/common.png') -125px -385px no-repeat;
            background-position-x: -126px;
            display: inline-block;
            margin-top: 18px;
            vertical-align: -3px;
        }

        .right-one {
            margin-top: -1px;
        }

        .right .right-two a {
            display: inline-block;
            font-size: 12px;
            color: white;
            height: 30px;
            background-color: #06984B;
            width: 60px;
            padding-left: 12px;
            margin-right: -15px;
            line-height: 30px;
            border-radius: 5px;
        }
        .right .right-two a:hover{
            box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);
        } 
        .right-three a {
            font-size: 12px;
            color: #06984B;
        }

        .logo {
            margin-top: 20px;
        }

        .logoleft {
            background-image: url(千图网/001.png);
            width: 150px;
            height: 73px;
        }

        .kuang {
            width: 590px;
            height: 50px;
            border: 1px solid #CCCCCC;
            display: flex;
            line-height: 50px;
            margin-top: 6px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .wenzi {
            width: 78px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-right: 1px solid #CCCCCC;
            margin-top: 10px;
        }

        .kuang input {
            width: 500px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            border: none;
            outline: medium;
            margin-left: 10px;
        }

        .logoright {
            margin-left: 86px;
        }

        .button {
            width: 80px;
            height: 50px;
            background-color: #12CD5F;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            margin-top: 6px;
        }

        .button a {
            background: url(千图网/common.png) -66px -446px no-repeat;
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-top: 15px;
            margin-left: calc(50% - 10px);
        }

        .top {
            display: flex;
        }

        .content2 {
            display: flex;
        }

        .bottom {
            display: flex;
            margin-top: 5px;
        }

        .bottom li {
            padding-left: 10px;
            font-size: 12px;
        }

        .bottom a {
            text-decoration: none;
            color: #666666;
        }

        .bottom .green a {
            color: #30CD71;
        }


        .tupian{
            background-color: #050505;
        }
        .box {
            width: 1200px;
            height: 320px;
            position: relative;
            margin-top: 30px;
        }

        .box .imgs li {
            position: absolute;
            display: none;
        }

        .box .imgs .imgfirst {
            display: block;
        }

        .radio {
            position: absolute;
            display: flex;
            justify-content: center;
            width: 100%;
            bottom: 10px;
        }

        .box .radio li:hover {
            background-color: #10C55B;
        }

        .box .radio li {
            width: 15px;
            height: 15px;
            border-radius: 50px;
            background-color: #999999;
            margin-left: 5px;
        }

        .box .radio .radio1 {
            background-color: #10C55B;
        }

        .box .Click span {
            font-size: 40px;
            color: white;
            position: absolute;
            width: 60px;
            height: 130px;
            background-color: rgba(0, 0, 0, 0.3);
            top: calc(50% - 65px);
            text-align: center;
            line-height: 130px;
            display: none;
        }

        .box .Click span:hover {
            background-color: rgba(0, 0, 0, 0.6);
        }

        .box .Click .prev {
            left: -350px;
        }

        .box .Click .next {
            right: -350px;
        }

        .zhuanti {
            display: flex;
            margin-top: 30px;
        }

        .zhuanti .picture1 {
            background: url(千图网/common.png) -96px -415px no-repeat;
            width: 30px;
            height: 30px;
            display: inline-block;
            vertical-align: -8px;
        }

        .zhuanti .jingxuan span:nth-child(2) {
            font-size: 25px;
            color: #666666;
            margin-left: 6px;
        }

        .zhuanti .wenzi1 {
            margin-top: 3px;
            margin-left: 30px;
        }

        .zhuanti .wenzi1 a,
        .zhuanti .more a {
            text-decoration: none;
            color: #888888;
            font-size: 14px;
        }

        .zhuanti .more {
            margin-top: 3px;
            margin-left: 540px;
        }

        .zhuanti .wenzi1 a:hover,
        .zhuanti .more a:hover {
            color: rgb(253, 131, 32);
        }


    /* 精选专题 图片 阴影层 */
        .Img1 {
             display: flex; 
             justify-content: space-between; 
            margin-top: 20px;            
        }
         
        .Img1 .tire-move{
             width: 290px;
             height: 200px;
             position: relative; 
             /* 溢出隐藏 */
               overflow: hidden;  
        }
       
        .Img1 li .tire {
            position: absolute;
            width: 290px; 
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            top:0;
            opacity: 0;
        }

       
       .Img1 li .con{
            width: 220px; 
            height: 110px; 
            line-height: 30px;
            border-top: 1px solid;  
            border-bottom: 1px solid;  
            color: white;
            text-align: center;
            margin: 50px auto; 
            top:100%;
            left:13%;
            position: absolute;
            
       }
        .Img1 li .con p{
            margin-top: 15px;
        }
        .Img1 .tire-move:hover .con{
                top:0;
                transition: all 0.3s;
        }
        .Img1 .tire-move:hover .tire{
                opacity: 1;
        }
        a{
            text-decoration: none;
            font-size:inherit;
            color:inherit;
        }
        .Img1 li .con .a{
             font-size: 20px;
             font-weight: bold;
         }
        .Img1 li .con .b{
         font-size: 14px;
             
        }


        .haibao{
            display: flex;
            margin-top: 60px;
        }
        .haibao .wenzi2{
            display: flex;
            margin-top: 3px;
        }
        .haibao .wenzi2 li{
             padding-left: 20px; 
        }
        .haibao .more{
            margin-left: 630px;
        }
        .haibao .picture2{
            background: url(千图网/common.png) -126px -415px no-repeat;
            width: 27px;
            height: 29px;
            display: inline-block;
            vertical-align: -5px;
        }
        .haibao .shangyong span:nth-child(2){
            font-size: 25px;
            color: #666666;
            margin-left: 6px;
        }
        
        .haibao .wenzi2 a,
        .haibao .more a {
            text-decoration: none;
            color: #888888;
            font-size: 14px;
        }
        .haibao .wenzi2 a:hover,
        .haibao .more a:hover {
            color: rgb(253, 131, 32);
        }



        .Img2 .photo{
            background-image: url(千图网/syhb01.jpg);
            width: 290px;
            height: 387px;
             
        }

        .Img2{
            position: relative;
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            overflow: hidden;
        }
        .Img2 .photo .yuanchuang{
            background: url(千图网/common.png) 0 0 no-repeat;
            width: 53px;
            height: 54px;
        }
        .Img2 .ceng{
            width: 290px;
            height: 387px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top:0;
            opacity: 0;
        }
        .Img2 .info{
            position: absolute;
            top:-80px;
            transition: all 0.3s;
        }
        .Img2 .info .tu1{
            background: url(千图网/common.png) 0 -54px no-repeat;
            width: 53px;
            height: 54px;
            display: inline-block;
            margin-left: 160px;
        }
        .Img2 .info .tu2{
            background: url(千图网/common.png) -53px -54px no-repeat;
            width: 53px;
            height: 54px;
            display: inline-block;
        }
        .Img2 .info .tu1:hover{
            background: url(千图网/common.png) 0 -110px no-repeat;
        }
        .Img2 .info .tu2:hover{
            background: url(千图网/common.png) -53px -110px no-repeat;
        }
         .Img2 .info .m{
            color: white;
            margin-left: 180px;
            display: inline-block;
            width: 20px;
        } 
         .Img2 .info .n{
            color: white;
            margin-left: 35px;
            display: inline-block;
            width: 20px;
            width: 20px;

        } 
         p{
               margin: 0;
        }
        .text{
            font-size: 14px;
            
            margin-top: 10px;
        }
        .text a{
              color: #666666;   
              text-decoration: none; 
        }
        .Img2 li:hover .ceng{
             opacity: 1;
        }
         .Img2 li:hover .info{
             top: 0;
        }

        footer{
            width: 100%;
            height: 320px;
             background-color: #F6F6F6; 
             margin-top: 30px;
        }
        .foot{
            display: flex;

        }
        .foot li:nth-child(1){
            color: #666666;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .foot li{
            margin-top: 5px;
        }
        .foot li a{
            text-decoration: none;
            color: #888888;
            font-size: 12px;
        }
        .foot .foot-first{
            margin-left: 20px;
            margin-top: 30px;
        }
        .foot .foot-second,
        .foot .foot-third,
        .foot .foot-fourth{
            margin-left: 80px;
             margin-top: 30px;
        }
       
        .foot-right{
            margin-left: 300px;
            margin-top: 30px;
        }
        .foot-right .right-two span:nth-child(1){
            background: url(千图网/common.png) -65px -176px no-repeat; 
            width: 26px;
            height: 26px;
            display: inline-block;
            vertical-align: middle;
        }
        .foot-right .right-three span:nth-child(1){
            background: url(千图网/common.png)  -34px -176px no-repeat; 
            width: 26px;
            height: 26px;
            display: inline-block;
            vertical-align: middle;
        }
        .foot-right .right-one{
            margin-bottom: 30px;
            font-size: 20px;
            font-weight: bold;
            color: #666666;
        }
        .foot-right .right-two,
        .foot-right .right-three,
        .foot-right .right-four{
            margin-top: 20px;
            font-size: 18px;
            color: #666666;
        }
        .foot-right .right-four{
            width: 140px;
            height: 40px;
            background-color: #10C75C;
            text-align: center;
            line-height:40px; 
            color: white;
            border-radius: 5px;
        }
        .foot-right .right-four:hover{
            cursor: pointer;
        }
        .foot-right .right-four span:nth-child(1){
            background: url(千图网/common.png) -1px -176px no-repeat;
            width: 26px;
            height: 26px;
            display: inline-block;
            vertical-align: middle;
        }
        hr{
            color: #CCCCCC;
            margin-top: 40px;
        }
        .bottom{
            display: flex;
            justify-content: space-between;
        }
        .bottom ul{
            display: flex;
        }
        .bottom ul li{
            margin-left: 20px;
        }
        .bottom ul li:nth-child(3){
            margin-left: 40px;
        }
        .bottom .li-first a{
            background: url(千图网/common.png) -65px -206px no-repeat;
            display: inline-block;
            width: 26px;
            height: 26px;
        }
         .bottom .li-second a{
            background: url(千图网/common.png) -35px -206px no-repeat;
            display: inline-block;
            width: 26px;
            height: 26px;
        }
        .bottom .bottom-right .tubiao{
            background: url(千图网/common.png) -163px -20px no-repeat;
            display: inline-block;
            width: 23px;
            height: 25px;
            vertical-align: middle;
        }
        .bottom .bottom-right span:nth-child(1),
        .bottom .bottom-right span:nth-child(4){
            color: #888888;
            font-size: 12px;
        }
        .bottom .bottom-right span:nth-child(2){
            font-size: 12px;
        }

        .bottom ul li:nth-child(3) a:hover,
        .bottom ul li:nth-child(4) a:hover,
        .bottom ul li:nth-child(5) a:hover{
            color: #11C85C;
        }
        
    </style>
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="container">
            <div class="content">
                <ul class="left">
                    <li class="left-first"><a href="#">首页</a></li>
                    <li><a href="#"><span>所有分类</span></a></li>
                    <li><a href="#">设计创意</a></li>
                    <li><a href="#">办公创意</a></li>
                    <li><a href="#">&bull;&nbsp;&bull;&nbsp;&bull;</a></li>
                </ul>
                <ul class="right">
                    <li class="right-one">
                        <a href="#">
                        <span id="img1"></span>
                        <span>VIP中心</span>
                    </a>
                    </li>
                    <li class="right-two"><a href="#">请登录</a></li>
                    <li class="right-three"><a href="#">免费注册</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <div class="logo">
        <div class="container">
             <div class="content2"> 
                <div class="logoleft"></div>
                <div class="logoright">
                    <div class="top">
                        <div class="kuang">
                            <div class="wenzi">全站&nbsp;&#8744;</div>
                            <input type="text" name="" placeholder="800万免费设计素材任意下载">
                        </div>
                        <div class="button"><a href="#"></a></div>
                    </div>
                    <ul class="bottom">
                        <li>热门搜索：</li>
                        <li class="green"><a href="#">七夕</a></li>
                        <li><a href="#">详情页</a></li>
                        <li class="green"><a href="#">icon</a></li>
                        <li><a href="#">主图</a></li>
                        <li class="green"><a href="#">秋季</a></li>
                        <li class="green"><a href="#">PPT模版</a></li>
                        <li><a href="#">EXCLE模版</a></li>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">个人简历</a></li>
                        <li class="green"><a href="#">装饰画</a></li>
                    </ul>
                </div>
             </div> 
        </div>
    </div>

    <div class="tupian">
        <div class="container">
            <div class="box">
                <ul class="imgs">
                    <li class="imgfirst"><a href="#"><img src="千图网/banner01.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner02.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner03.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner04.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner05.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner06.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner07.jpg" alt=""></a></li>
                    <li><a href="#"><img src="千图网/banner08.jpg" alt=""></a></li>
                </ul>
                <ul class="radio">
                    <li class="radio1"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="Click">
                    <span class="prev">&lt;</span>
                    <span class="next">&gt;</span>
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="container">
            <div class="zhuanti">
                <div class="jingxuan">
                    <span class="picture1"></span>
                    <span>精选专题</span>
                </div>
                <div class="wenzi1">
                    <a href="#">100万党建素材、PPT汇报模版无限下载，每天仅需0.18元立享VIP特权</a>
                </div>
                <div class="more"><a href="#">更多>></a></div>
            </div>
        </div>
    </div>

    <div class="container">
        <ul class="Img1">
            <li class="tire-move">  
                    <a href="#">
                        <img src="千图网/jxzt01.jpg" alt="">
                         <div class="tire"></div>
                        <div class="con">                           
                             <p class="a">和啤酒有关</p>
                             <p class="b">啤酒是如何拯救世界的</p> 
                        </div>
                    </a>
            </li>

           <li class="tire-move">  
                    <a href="#">
                        <img src="千图网/jxzt02.jpg" alt="">
                         <div class="tire"></div>
                         <div class="con">                           
                             <p class="a">和啤酒有关</p>
                             <p class="b">啤酒是如何拯救世界的</p> 
                        </div>
                    </a>
            </li>
            
            <li class="tire-move">  
                    <a href="#">
                        <img src="千图网/jxzt03.jpg" alt="">
                         <div class="tire"></div>
                        <div class="con">                           
                             <p class="a">和啤酒有关</p>
                             <p class="b">啤酒是如何拯救世界的</p> 
                        </div>
                    </a>
            </li>

            <li class="tire-move">  
                    <a href="#">
                        <img src="千图网/jxzt04.jpg" alt="">
                         <div class="tire"></div>
                        <div class="con">                           
                             <p class="a">和啤酒有关</p>
                             <p class="b">啤酒是如何拯救世界的</p> 
                        </div>
                    </a>
            </li>
           
        </ul>
    </div>

     <div>
        <div class="container">
            <div class="haibao">
                <div class="shangyong">
                    <span class="picture2"></span>
                    <span>商用海报</span>
                </div>
                <ul class="wenzi2">
                    <li><a href="#">招聘海报</a></li>
                    <li><a href="#">配图海报</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">促销海报</a></li>
                    <li><a href="#">原创插画</a></li>
                </ul>
                <div class="more"><a href="#">更多>></a></div>
            </div>
        </div>
    </div>

    <div>
        <div class="container">
            <ul class="Img2">
                <li>
                    <div class="ceng"></div>
                    <div class="info">
                        <span class="tu1"></span>
                        <span class="tu2"></span>
                       <p>
                           <span class="m">88</span><span class="n">666</span>
                       </p>
                    </div>   
                  
                    <div class="photo">
                        <div class="yuanchuang"></div>
                    </div>
                    <p class="text"><a href="#">七夕情人节扁平风创意简约商业海报设计模板</a></p>
                </li>

               <li>
                    <div class="ceng"></div>
                    <div class="info">
                        <span class="tu1"></span>
                        <span class="tu2"></span>
                       <p>
                           <span class="m">88</span><span class="n">666</span>
                       </p>
                    </div>   
                  
                    <div class="photo">
                        <div class="yuanchuang"></div>
                    </div>
                    <p class="text"><a href="#">七夕情人节扁平风创意简约商业海报设计模板</a></p>
                </li>

                <li>
                    <div class="ceng"></div>
                    <div class="info">
                        <span class="tu1"></span>
                        <span class="tu2"></span>
                       <p>
                           <span class="m">88</span><span class="n">666</span>
                       </p>
                    </div>   
                  
                    <div class="photo">
                        <div class="yuanchuang"></div>
                    </div>
                    <p class="text"><a href="#">七夕情人节扁平风创意简约商业海报设计模板</a></p>
                </li>

                <li>
                    <div class="ceng"></div>
                    <div class="info">
                        <span class="tu1"></span>
                        <span class="tu2"></span>
                       <p>
                           <span class="m">88</span><span class="n">666</span>
                       </p>
                    </div>   
                  
                    <div class="photo">
                        <div class="yuanchuang"></div>
                    </div>
                    <p class="text"><a href="#">七夕情人节扁平风创意简约商业海报设计模板</a></p>
                </li>
            </ul>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="foot">
                <ul class="foot-first">
                    <li>常见问题</li>
                    <li><a href="href#">成为特邀设计师</a></li>
                    <li><a href="href#">成为原创贡献者</a></li>
                    <li><a href="href#">注册成功</a></li>
                    <li><a href="href#">帐号/密码</a></li>
                    <li><a href="href#">充值/售后</a></li>
                    <li><a href="href#">版权投诉</a></li>
                </ul>
                <ul class="foot-second">
                    <li>关于千图网</li>
                    <li><a href="href#">关于我们</a></li>
                    <li><a href="href#">媒体报道</a></li>
                    <li><a href="href#">加入我们</a></li>
                    <li><a href="href#">心系千图</a></li>
                    <li><a href="href#">每日最新</a></li>
                </ul>
                <ul class="foot-third">
                    <li>产品服务</li>
                    <li><a href="href#">官方博客</a></li>
                    <li><a href="href#">帮助中心</a></li>
                    <li><a href="href#">千图导航</a></li>
                </ul>
                 <ul class="foot-fourth">
                    <li>友情链接</li>
                    <li><a href="href#">我图网</a></li>
                    <li><a href="href#">千库网</a></li>
                    <li><a href="href#">摄图网</a></li>
                    <li><a href="href#">包图网</a></li>
                    <li><a href="href#">视达网</a></li>
                    <li><a href="href#">更多>></a></li>
                </ul>

                <div class="foot-right">
                    <p class="right-one">客服咨询</p>
                    <p class="right-two">
                        <span></span>
                        <span>400-998-7011</span>
                        <span>（9:00-18:00）</span>
                    </p>
                    <p class="right-three">
                        <span></span>
                        <span>feedback@58pic.com</span>
                    </p>
                    <p class="right-four">
                        <span></span>
                        <span>点我交谈</span>
                    </p>
                </div>
            </div>
            <hr>

            <div class="bottom">
                <ul>
                    <li class="li-first"><a href="#"></a></li>
                    <li class="li-second"><a href="#"></a></li>
                    <li><a href="#">注册声明</a></li>
                    <li><a href="#">版权声明</a></li>
                    <li><a href="#">售后服务</a></li>
                </ul>
                <div class="bottom-right">
                    <span>Copyright ©2013-2017 千图网 </span>
                    <span><a href="#"> 沪ICP备10011451号-6</a></span>
                    <span class="tubiao"></span>
                    <span>上海工商 安全实名验证 信用网站</span>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>
<script>
    window.onload = function () {

        var leftLs = document.querySelectorAll('.left li');
        var lefta = document.querySelectorAll('.left a');
        var rightone = document.querySelector('.right-one');
        var rightoneA = document.querySelector('.right-one a');
        var imgs = document.querySelectorAll('.imgs li');
        var prev = document.querySelector('.Click .prev');
        var next = document.querySelector('.Click .next');
        var radios = document.querySelectorAll('.radio li');
        var box = document.querySelector('.box');
        var tupian = document.querySelector('.tupian');
        
        // logo 输入框
        var kuang = document.querySelector('.logo .kuang');
        var input = document.querySelector('.logo .kuang input');
        
        input.onfocus = function(){
            kuang.style.borderColor = '#10c55b';
        }
        input.onblur = function(){
            kuang.style.borderColor = '#CCCCCC';
        }
        

        rightone.onmouseover = function () {
            rightone.style.backgroundColor = '#01AC48';
            rightoneA.style.color = 'white';
        }
        rightone.onmouseout = function () {
            rightone.style.backgroundColor = '#10C55B';
            rightoneA.style.color = '#AFFFD0';
        }
        // 鼠标移到header的li标签 样式变化
        for (var i = 0; i < leftLs.length; i++) {
            leftLs[i].index = i;
            leftLs[i].onmouseover = function () {
                leftLs[this.index].style.backgroundColor = '#01AC48';
                lefta[this.index].style.color = 'white';
            }

            leftLs[i].onmouseout = function () {
                leftLs[this.index].style.backgroundColor = '#10C55B';
                lefta[this.index].style.color = '#AFFFD0';
            }
        }

        var index = 0;
        //  上一张
        function prevImg() {
            index = index == 0 ? imgs.length - 1 : index - 1;
            changeImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgs.length - 1 ? 0 : index + 1;
            changeImg();
        }
        
        var color = ['#060606','#FFFF0F','#FDF001','#2D9AFF','#89DCE4','#FDF7C3','#110104','#F4CAD8'];
        //  切换图片
        function changeImg() {
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].className = '';
                radios[i].className = '';
                tupian.style.backgroundColor = '';
            }
            imgs[index].className = 'imgfirst';
            radios[index].className = 'radio1';
            tupian.style.backgroundColor = color[index];
        }

        var timer = setInterval(nextImg, 1000);
        // 根据指示灯切换图片
        for (var i = 0; i < radios.length; i++) {
            radios[i].index = i;
            radios[i].onclick = function () {
                clearInterval(timer);
                timer = null;
                index = this.index;
                changeImg();
            }

            //  鼠标离开指示灯
            radios[i].onmouseout = function () {
                if (timer == null) {
                    timer = setInterval(nextImg, 1000);
                }
            }
        }

        //  鼠标进入图片，自动切换暂停
        tupian.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        tupian.onmouseout = function () {
            if (timer == null) {
                timer = setInterval(nextImg, 1000);
            }
            prev.style.display = 'none';
            next.style.display = 'none';
        }

        // 点击上一张
        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }

    }

</script>